<template>
  <el-container>
    <el-aside>
      <div class="logo">
        <!-- <i class="el-icon-picture-outline-round"></i> -->
        <span v-if="!isCollapse">日常考核系统</span>
      </div>
      <!-- :default-active="$route.path" -->
      <el-menu
        class="el-menu-vertical-demo"
        background-color="#2C3460"
        text-color="white"
        active-text-color="white"
        unique-opened
        :collapse="isCollapse"
        router
      >
        <!-- :default-openeds="openeds" -->
        <el-menu-item class="icon-help" index="/dashboard">
          <i class="el-icon-help"></i>
          <span slot="title">仪表盘</span>
        </el-menu-item>
        <template v-for="item in itemList">
          <el-submenu
            :index="item.permissionId + ''"
            :key="item.permissionId"
            v-if="item.childrens && item.childrens.length"
          >
            <template slot="title">
              <i class="iconSty" :class="item.icon"></i>
              <span>{{ item.permissionName }}</span>
            </template>
            <template v-for="items in item.childrens">
              <el-menu-item-group :key="items.permissionId">
                <el-menu-item :index="'/' + items.path">
                  {{ items.permissionName }}
                </el-menu-item>
              </el-menu-item-group>
            </template>
          </el-submenu>
          <el-menu-item
            class="icon-help"
            v-else
            :index="'/' + item.path"
            :key="item.permissionId"
          >
            <i :class="item.icon"></i>
            <span slot="title">{{ item.permissionName }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <i @click="handleClose" class="el-icon-s-operation"></i>
        <span class="systeName">全市"十项重点工作"日常考核信息管理系统</span>
        <div class="timesData">
          <div class="timeStr">
            <!-- 时间：<span id="times"></span> -->
            <span>用户：{{ username }}</span>
          </div>
          <el-dropdown>
            <el-popover placement="bottom" width="100" trigger="click">
              <div style="text-align: center;color:#409EFF">
                <p @click="logout" style=" cursor: pointer;">退出登录</p>
              </div>
              <el-button
                style="color:#fff;background:#2C3460;position: relative;left:-20px;border:0;width:40px;"
                slot="reference"
                ><i class="el-icon-arrow-down el-icon-user"></i
              ></el-button>
            </el-popover>
            <el-popover
              placement="bottom"
              width="375"
              height="500"
              trigger="click"
            >
              <template>
                <el-tabs
                  v-model="activeName"
                  type="card"
                  @tab-click="handleClick"
                  :before-leave="Tabever"
                >
                  <el-tab-pane label="任务采集消息" name="first">
                    <div class="messageList">
                      <div
                        class="message"
                        v-for="(item, index) in tableData"
                        :key="index"
                      >
                        <div class="span" @click="updataList(item, 1)">
                          <span>{{ item.taskName }}</span>
                          <span> {{ returnDate(item.status) }}</span
                          ><br />
                          <span> {{ timestampToTimes(item) }}</span>
                        </div>
                        <div v-if="item.read == 0" class="small"></div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="进度填报消息" name="second">
                    <div class="messageList">
                      <div
                        class="message"
                        v-for="(item, index) in tableData"
                        :key="index"
                      >
                        <div class="span" @click="updataList(item, 2)">
                          <span>{{ item.taskName }}</span>
                          <span>{{ "第" + item.quarter + "季度" }}</span>
                          <span>进度审核{{ returnDate(item.status) }}</span
                          ><br />
                          <span> {{ timestampToTimes(item) }}</span>
                        </div>
                        <div v-if="item.read == 0" class="small"></div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="打分消息" name="third">
                    <div class="messageList">
                      <div
                        class="message"
                        v-for="(item, index) in tableData"
                        :key="index"
                      >
                        <div class="span" @click="updataList(item, 3)">
                          <span>{{ item.taskName }}</span>
                          <span>{{ "第" + item.quarter + "季度" }}</span>
                          <span>{{ returnDate(item.status) }}</span
                          ><br />
                          <span> {{ timestampToTimes(item) }}</span>
                        </div>
                        <div v-if="item.read == 0" class="small"></div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="预警亮灯消息" name="lightup">
                    <div class="messageList">
                      <div
                        class="message"
                        v-for="(item, index) in tableData"
                        :key="index"
                      >
                        <div class="span" @click="updataList(item, 4)">
                          <span>{{ item.taskName }}</span>
                          <span>{{ "第" + item.quarter + "季度" }}</span>
                          <span> 预警亮灯工作已完毕 </span><br />
                          <span> {{ timestampToTimes(item) }}</span>
                        </div>
                        <div v-if="item.read == 0" class="small"></div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </template>
              <el-button
                style="color:#fff;background:#2C3460;position: relative;"
                type="text"
                slot="reference"
              >
                <i class="el-icon-message"></i>
                <div v-if="showRed" class="small1"></div>
              </el-button>
            </el-popover>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item @click.native="logout"
                >退出登录</el-dropdown-item
              > -->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>

    <el-dialog
      title="消息详情"
      :visible.sync="dialogVisible"
      width="420px"
      :close-on-click-modal="false"
      :before-close="handleCloses"
    >
      <el-form :model="taskForm" label-width="95px">
        <el-form-item
          v-if="taskForm.departmentNmae"
          label="责任单位："
          prop="departmentNmae"
        >
          <span>{{ taskForm.departmentNmae + "责任单位" }}</span>
        </el-form-item>
        <el-form-item
          v-if="taskForm.taskName"
          label="重点工作："
          prop="departmentNmae"
        >
          <span>{{ taskForm.taskName }}</span>
        </el-form-item>
        <el-form-item
          v-if="taskForm.tagetName"
          label="目标任务："
          prop="departmentNmae"
        >
          <span>{{ taskForm.tagetName }}</span>
        </el-form-item>
        <el-form-item v-if="taskForm.year" label="年份：" prop="year">
          <span>{{ taskForm.year + "年" }}</span>
        </el-form-item>
        <el-form-item v-if="taskForm.quarter" label="季度：" prop="quarter">
          <span>{{ "第" + taskForm.quarter + "季度" }}</span>
        </el-form-item>
        <el-form-item
          label="申请人："
          v-if="taskForm.status == -1 ? false : true"
        >
          <span>{{ taskForm.applicatName }}</span>
        </el-form-item>
        <el-form-item
          label="操作人："
          v-if="taskForm.status == 0 ? false : true"
        >
          <span>{{ taskForm.auditorName }}</span>
        </el-form-item>
        <el-form-item v-if="taskForm.status" label="状态：" prop="status">
          <span>{{ taskForm.status == 1 ? "通过" : "驳回" }}</span>
        </el-form-item>
        <el-form-item label="操作时间" prop="status">
          <span>{{ timestampToTimes(taskForm) }}</span>
        </el-form-item>
        <el-form-item v-if="taskForm.message" label="原因：" prop="message">
          <span>{{ taskForm.message }}</span>
        </el-form-item>
        <el-form-item>
          <el-button class="saveBtn" type="primary" @click="submitForm"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      time: "",
      username: localStorage.getItem("username"),
      isCollapse: false,
      openeds: ["5"],
      itemList: [
        {
          permissionId: 1,
          permissionName: "指标管理",
          childrens: [
            {
              permissionId: 1 - 1,
              permissionName: "指标列表",
              path: "indicatorsList"
            },
            {
              permissionId: 1 - 2,
              permissionName: "任务管理",
              path: "taskInfo"
            }
          ]
        },
        {
          permissionId: 2,
          permissionName: "考核评分",
          childrens: [
            {
              permissionId: 2 - 1,
              permissionName: "指标完成率",
              path: "indicatorsScore"
            },
            {
              permissionId: 2 - 2,
              permissionName: "配合单位评分",
              path: "unitScore"
            },
            {
              permissionId: 2 - 3,
              permissionName: "重点任务评分",
              path: "taskScore"
            }
          ]
        },
        {
          permissionId: 3,
          permissionName: "加减分管理",
          childrens: [
            {
              permissionId: 3 - 1,
              permissionName: "负面清单",
              path: "negativeList"
            },
            {
              permissionId: 3 - 2,
              permissionName: "日常工作台账",
              path: "workLedger"
            },
            {
              permissionId: 3 - 3,
              permissionName: "加减分项",
              path: "addsubData"
            }
          ]
        },
        {
          permissionId: 4,
          permissionName: "系统管理",
          childrens: [
            {
              permissionId: 4 - 1,
              permissionName: "责任单位信息",
              path: "deptmentInfo"
            },
            {
              permissionId: 4 - 2,
              permissionName: "用户管理",
              path: "userInfo"
            },
            {
              permissionId: 4 - 3,
              permissionName: "权限管理",
              path: "permissionsInfo"
            },
            {
              permissionId: 4 - 4,
              permissionName: "日志管理",
              path: "logInfo"
            },
            // {
            //   permissionId: 4 - 6,
            //   permissionName: "区域管理",
            //   path: "areaInfo"
            // },
            {
              permissionId: 4 - 7,
              permissionName: "群组管理",
              path: "groupInfo"
            }
          ]
        }
      ],
      array: [],
      visible: false,
      tableData: [],
      activeName: "first",
      dialogVisible: false,
      dialognews: false,
      taskForm: {
        taskName: "",
        tagetName: "",
        departmentNmae: "",
        year: "",
        quarter: "",
        status: "",
        message: "",
        obj: {}
      },
      showRed: false
    };
  },
  mounted() {
    this.getNavList();
    this.getListByPage("/taskCollectionCheckLog/getList");
    this.getshowData();
    // setInterval(() => {
    //   this.getDate(), 1000;
    // });
  },
  methods: {
    returnDate(data) {
      if (data == 1) {
        return "通过";
      } else if (data == -1) {
        return "驳回";
      } else {
        return "申请";
      }
    },
    // 时间转换
    timestampToTimes(val) {
      let timestamp = "";
      if (val.status == 1) {
        timestamp = val.updateTime;
      } else {
        timestamp = val.addTime;
      }
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear();
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      // return Y + M + D;
      let _time = `${Y}年${M}月${D}日`;
      return _time;
    },
    getDate() {
      // var date = new Date();
      // var date1 = date.toLocaleString();
      // var div1 = document.getElementById("times");
      // div1.innerHTML = date1;
    },
    getNavList() {
      this.itemList = JSON.parse(localStorage.getItem("permissions"));
    },
    handleClose() {
      this.isCollapse = !this.isCollapse;
    },
    logout() {
      localStorage.removeItem("token");
      localStorage.removeItem("permissions");
      this.$router.push("/");
    },
    magess() {},
    getListByPage(data) {
      this.$axios
        .post(data)
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getshowData() {
      let strArr = new Promise((resolve, reject) => {
        this.$axios.post("/taskCollectionCheckLog/getList").then(res => {
          if (res.code == 200) {
            resolve(res.data);
          }
        });
      });
      let strArr1 = new Promise((resolve, reject) => {
        this.$axios.post("/taskSubtasksCheckLog/getList").then(res => {
          if (res.code == 200) {
            resolve(res.data);
          }
        });
      });
      let strArr2 = new Promise((resolve, reject) => {
        this.$axios.post("/departmentScoreCheckLog/getList").then(res => {
          if (res.code == 200) {
            resolve(res.data);
          }
        });
      });
      Promise.all([strArr, strArr1, strArr2]).then(resultList => {
        var data = [];
        resultList.map(function(value, index, array) {
          data = data.concat(value);
        });
        // console.log(data)
        let arr = [];
        data.forEach(i => {
          arr.push(i.read);
        });
        // console.log(arr)
        if (arr.indexOf(0) !== -1) {
          this.showRed = true;
        } else {
          this.showRed = false;
        }
      });
    },
    handleClick(tab, event) {},
    Tabever(activeName, oldActiveName) {
      // console.log(activeName)
      if (activeName == "first") {
        // console.log(1)
        this.getListByPage("/taskCollectionCheckLog/getList");
      } else if (activeName == "second") {
        // console.log(2)
        this.getListByPage("/taskSubtasksCheckLog/getList");
      } else if (activeName == "third") {
        // console.log(3)
        this.getListByPage("/departmentScoreCheckLog/getList");
      } else if (activeName == "lightup") {
        console.log(4);
        this.getListByPage("/lightLogController/getLightLogList");
      }
    },
    updataList(data, index) {
      this.dialogVisible = true;
      this.taskForm = data;
      console.log(data);
      let obj = {
        id: data.id,
        read: 1
      };

      if (data.read == 0) {
        if (index == 1) {
          this.$axios
            .post("/taskCollectionCheckLog/updateReda", obj, 2)
            .then(res => {
              if (res.code == 200) {
                this.getListByPage("/taskCollectionCheckLog/getList");
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else if (index == 2) {
          console.log(2);
          this.$axios
            .post("/taskSubtasksCheckLog/updateReda", obj, 2)
            .then(res => {
              if (res.code == 200) {
                this.getListByPage("/taskSubtasksCheckLog/getList");
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else if (index == 3) {
          console.log(3);
          this.$axios
            .post("/departmentScoreCheckLog/updateReda", obj, 2)
            .then(res => {
              if (res.code == 200) {
                this.getListByPage("/departmentScoreCheckLog/getList");
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else if (index == 4) {
          this.$axios
            .post("/lightLogController/updateReda", obj, 2)
            .then(res => {
              if (res.code == 200) {
                this.getListByPage("/departmentScoreCheckLog/getList");
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      }
    },
    handleCloses(done) {
      this.dialogVisible = false;
    },
    submitForm() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style scoped>
.el-container {
  width: 100%;
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 60px;
  background: #2c3460;
}
.systeName {
  font-size: 22px;
  margin-left: 120px;
  color: white;
}
.el-icon-s-operation {
  font-size: 24px;
  color: #fff;
}
.el-aside {
  width: auto !important;
  line-height: 200px;
  border-right: 1px solid #e6e6e6;
  background: #2c3460;
}
.el-menu {
  border-right: none;
}
/* .el-menu-item {
  padding-left: 56px !important;
} */
.iconSty {
  color: white;
  margin-right: 10px;
 
}
.logo {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: white;
}
.logo i {
  margin-left: 22px;
  margin-right: 12px;
}
.logo span {
  margin-left: 42px;
}
.el-main {
  background: rgb(252, 248, 248);
  /* padding: 2px 0px;
  position: relative; */
}
.icon-help {
  padding: 0 15px !important;
}
.el-icon-help {
  font-size: 15px;
  color: white;
  width: 20px !important;
  text-align: center !important;
}
.el-tooltip {
  padding-right: 5px !important;
}
.el-icon-user,
.el-icon-message {
  margin-right: 15px;
  font-size: 24px;
  color: #ffffff;
}
.messageList {
  height: 300px;
  overflow: auto;
  overflow-x: hidden;
}
.message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #dbd5d5;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 2px;
  cursor: pointer;
}
.message .span {
  width: 98%;
  cursor: pointer;
}
.small {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: red;
}
.small1 {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: red;
  position: absolute;
  right: 15px;
  bottom: 15px;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
.timesData {
  display: flex;
  align-items: center;
  color: #fff;
}
.timeStr {
  margin-right: 20px;
}
.quitName {
  display: inline-block;
  width: 50px;
  height: 20px;
  background: red;
}

@media screen and (max-width: 1400px) {
  .systeName {
    margin-left: 0px;
  }
}

/* 导航 */
.el-submenu .el-menu-item {
  height: 32px;
  line-height: 32px;
  padding-left: 56px !important;
}
</style>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-item-group__title {
  padding: 0;
}
.el-menu-item.is-active {
  background-color: #1890ff !important;
}
.el-icon-edit-outline {
  color: #fff !important;
}
.el-icon-folder-opened:before,
.el-icon-coin:before,
.el-icon-aim:before {
  color: #fff;
  /* margin-right: 10px; */
  font-size: 14px;
}
</style>
